import React, {Component} from 'react';
import {ScrollView, Text} from 'react-native';
import {InputItem, List, WingBlank} from '@ant-design/react-native';
import {Navigation} from '../../../components/UseNavigation/index';
import styles from './styles';
const Item = List.Item;

@Navigation
export class Rate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      preValue: '',
      nextValue: '',
      rateValue: '',
    };
  }
  changeLast = (value) => {
    this.setState(
      {
        preValue: value,
      },
      () => {
        this.getResult();
      },
    );
  };
  changeNext = (value) => {
    this.setState(
      {
        nextValue: value,
      },
      () => {
        this.getResult();
      },
    );
  };

  getResult = () => {
    const {preValue, nextValue, rateValue} = this.state;
    if (preValue === '') {
      this.setState({
        rateValue: '请输入往期的值',
      });
      return;
    }
    if (nextValue === '') {
      this.setState({
        rateValue: '请输入本期的值',
      });
      return;
    }
    if (preValue * 1 === 0) {
      this.setState({
        rateValue: '往期的值不能为0',
      });
      return;
    }
    if (isNaN(preValue) || isNaN(nextValue)) {
      this.setState({
        rateValue: '请检查输入确保两个值都是数字',
      });
      return;
    }
    let result = ((nextValue - preValue) / preValue) * 100;
    let rate = `${result}%`;
    this.setState({
      rateValue: rate,
    });
  };

  render() {
    const {preValue, nextValue, rateValue} = this.state;
    return (
      <ScrollView
        style={{flex: 1}}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}>
        <WingBlank>
          <List renderHeader={'变化率计算'}>
            <InputItem
              clear
              value={preValue + ''}
              onChange={(value) => this.changeLast(value)}
              placeholder="请输入数字(非零)">
              <Text>往期值:</Text>
            </InputItem>
            <InputItem
              clear
              value={nextValue + ''}
              onChange={(value) => this.changeNext(value)}
              placeholder="请输入数字">
              <Text>本期值:</Text>
            </InputItem>
            <Item
              wrap
              extra={<Text style={styles.rateValue}>{rateValue}</Text>}>
              转换率
            </Item>
          </List>
          <List renderHeader={'注释'}>
            <Item wrap>
              往期的值一般值上一次记录的值，可以是去年此时的记录值，或者上个月记录的值，
            </Item>
            <Item wrap>
              本期的值一般值这一次记录的值，可以是今年此时的记录值，或者本个月记录的值，
            </Item>
            <Item wrap>
              变化率是指对比之前变化了百分之多少，，一般是增长率之类的意思。
            </Item>
          </List>
        </WingBlank>
      </ScrollView>
    );
  }
}
